<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { userLoginWithPhoneAndPwd } from "@/apis";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/store";

const router = useRouter();
const userStore = useUserStore();

const isLogin = ref(false);
const showPwd = ref(false);

const userPhone = ref("");
const password = ref("");
const loginUser = () => {
  userLoginWithPhoneAndPwd(userPhone.value, password.value).then((res) => {
    if (res.data?.status === "success") {
      console.log(res.data);
      userStore.setName(res.data?.name);
      userStore.setUID(res.data?.uuid);
      userStore.setStatus(res.data?.user_status);
      router.push("home");
      ElMessage.success("登陆成功！");
    } else {
      ElMessage.error("请检查您的登录信息！");
    }
  });
};
</script>

<template>
  <div class="total_page_bg"></div>
  <h1 class="main_title">白酒废水处理厂减污降碳效益评估与智慧诊断专家系统</h1>

  <div class="login-contain">
    <div class="bg1_div"></div>
    <div class="login_main">
      <div class="form" v-if="!isLogin">
        <div class="login_title">用户登录</div>
        <div class="input-container">
          <input type="text" id="uid" required name="uid" v-model="userPhone" />
          <label for="uid">手机号码</label>
          <i class="under"></i>
        </div>
        <div class="input-container">
          <input
            type="password"
            id="pwd"
            class="active"
            required
            name="password"
            v-model="password"
          />
          <label for="uid">密码</label>
          <i class="under"></i>
        </div>
      </div>
      <div v-if="!isLogin">
        <div class="buttonForm">
          <input type="submit" @click="loginUser" value="登录" id="btn" />
          <p class="noAccount">
            <router-link to="/register">注册新用户</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="foot_message">
    <div>著作权所属:北京林业大学，</div>
    <div>开发团队：齐飞，甘玉金，李晨，赵可可，王振北</div>
  </div>
</template>

<style scoped>
.foot_message {
  justify-content: center;
  margin-left: 50%;
  transform: translateX(-30%) translateY(-20vh);
  font-size: larger;
}
.total_page_bg {
  position: absolute;
  background: url(../assets/bg2.png);
  background-repeat: no-repeat;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.form {
  margin-top: 1vh;
  margin-left: 2.5vw;
  width: 80%;
  opacity: 80%;
  padding: 2% 5% 2% 5%;
  border-radius: 109px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 10px 10px 20px rgba(139, 176, 175, 0.25);
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.input-container {
  position: relative;
  width: 100%;
  margin: 5% 0;
}

.input-container input {
  width: 100%;
  background: transparent;
  outline: none;
  border: none;
  color: #222;
  padding: 8px;
}

.input-container label {
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(61, 61, 61, 1);
  text-transform: uppercase;
  pointer-events: none;
  transition: 0.5s;
  font-weight: bold;
}

.input-container input:valid ~ label,
.input-container input:focus ~ label {
  color: rgb(10, 131, 212);
  transform: translateY(-15px);
  font-size: 0.6rem;
}

.input-container .under {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: transparent;
}

.input-container .under:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(139, 176, 175, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  animation: animate 3s linear infinite;
}

.avatar img {
  width: 140px;
  height: 140px;
}

#btn {
  opacity: 70%;
  margin-left: 4vw;
  height: 40px;
  margin-top: 1vh;
  margin-bottom: 1vh;
  width: 80%;
  align-self: center;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  border-radius: 56.5px;
  background: linear-gradient(
      90deg,
      rgba(186, 214, 219, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ),
    rgba(255, 255, 255, 0.8);
  box-shadow: 10px 10px 20px rgba(139, 176, 175, 0.25);
  backdrop-filter: blur(10px);
}

#btn:hover {
  background: linear-gradient(
      0deg,
      rgba(186, 214, 219, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    ),
    rgba(255, 255, 255, 0.8);
}

.noAccount {
  margin-left: 10vw;
  transform: translateX(43%);
}

.buttonForm .noAccount,
.buttonForm .forgot {
  margin: 10px 0;
}

.text {
  font-size: 20px;
  font-weight: bold;
  margin-top: 30px;
}

.buttonForm .noAccount a,
.buttonForm .forgot a {
  text-decoration: none;
  padding: 0 5px;
  font-weight: bold;
}

.login-contain {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 57vh;
  transform: translateY(-25%);
  margin-top: 20vh;
}

.login_main {
  height: 60vh;
  width: 60vh;

  align-content: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main_title {
  margin-top: 10vh;
  margin-left: 50%;
  transform: translateX(-40%);
  font-size: 1.9em;
  width: 80vw;
}

.bg1_div {
  background: url(../assets/bg1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 45vh;
  width: 45vh;
}
</style>
